<template>
  <div>
    <a-modal
        centered
        width="60%"
        :visible="VisualInspectionReportVisible"
        title="Visual Inspection Report"
        :okText="$t('menuItem.confirm')"
        :cancelText="$t('menuItem.cancel')"
        @ok="VisualInspectionReportOk"
        @cancel="VisualInspectionReportCancel"
    >
        <a-row class="yy-Row">
          <!-- 查询条件 -->
          <a-form-model
              layout="inline"
              :model="queryLotInfoForm"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
          >
            <a-row>
              <a-col :span="5">
                <a-form-model-item :label="$t('menuItem.LotId')">
                  <a-select
                      v-model="queryLotInfoForm.lotId"
                      disabled
                  >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item :label="$t('menuItem.Technology')" >
                  <a-input
                      v-model="queryLotInfoForm.technology"
                      allowClear
                      disabled
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item :label="$t('menuItem.ProductId')" >
                  <a-input
                      v-model="queryLotInfoForm.productName"
                      allowClear
                      disabled
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="7">
                <a-form-model-item :label="$t('menuItem.Customer')" >
                  <a-input
                      v-model="queryLotInfoForm.customerCode"
                      allowClear
                      disabled
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="5">
                <a-form-model-item :label="$t('menuItem.Quantity')" >
                  <a-input
                      v-model="queryLotInfoForm.quantity"
                      allowClear
                      disabled
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item :label="$t('menuItem.Inspector')" >
                  <a-input
                      v-model="queryLotInfoForm.evtUsr"
                      allowClear
                      disabled
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item :label="$t('menuItem.date')" >
                  <a-input
                      v-model="queryLotInfoForm.evtTimestamp"
                      allowClear
                      disabled
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-row>
        <!-- table MA -->
        <a-row>
          <a-col :span="24">
            <a-table
                :columns="columns"
                :dataSource="dataSourceVI"
                :loading="loadTable"
                bordered
                size="small"
                :rowKey="(record,index)=>{return index}"
                :scroll="{y:120 }"
                :pagination="false"
            >
              <template  slot="siteJudgeS1" slot-scope="text, record">
                <a v-if="record.siteJudgeS1 != 'OK'" @click="()=>clickCellViDetail(getRecord(record,'S1'))">{{record.siteJudgeS1}}</a>
                <span v-if="record.siteJudgeS1 == 'OK'" >{{record.siteJudgeS1}}</span>
              </template>
              <template  slot="siteJudgeS2" slot-scope="text, record">
                <a v-if="record.siteJudgeS2 != 'OK'" @click="()=>clickCellViDetail(getRecord(record,'S2'))">{{record.siteJudgeS2}}</a>
                <span v-if="record.siteJudgeS2 == 'OK'" >{{record.siteJudgeS2}}</span>
              </template>
              <template slot="siteJudgeS3" slot-scope="text, record">
                <a v-if="record.siteJudgeS3 != 'OK'" @click="()=>clickCellViDetail(getRecord(record,'S3'))">{{record.siteJudgeS3}}</a>
                <span v-if="record.siteJudgeS3 == 'OK'" >{{record.siteJudgeS3}}</span>
              </template>
              <template slot="siteJudgeS4" slot-scope="text, record">
                <a v-if="record.siteJudgeS4 != 'OK'" @click="()=>clickCellViDetail(getRecord(record,'S4'))">{{record.siteJudgeS4}}</a>
                <span v-if="record.siteJudgeS4 == 'OK'" >{{record.siteJudgeS4}}</span>
              </template>
              <template slot="siteJudgeS5" slot-scope="text, record">
                <a v-if="record.siteJudgeS5 != 'OK'" @click="()=>clickCellViDetail(getRecord(record,'S5'))">{{record.siteJudgeS5}}</a>
                <span v-if="record.siteJudgeS5 == 'OK'" >{{record.siteJudgeS5}}</span>
              </template>
              <template slot="siteJudgeS6" slot-scope="text, record">
                <a v-if="record.siteJudgeS6 != 'OK'" @click="()=>clickCellViDetail(getRecord(record,'S6'))">{{record.siteJudgeS6}}</a>
                <span v-if="record.siteJudgeS6 == 'OK'" >{{record.siteJudgeS6}}</span>
              </template>
              <template slot="siteJudgeS7" slot-scope="text, record">
                <a v-if="record.siteJudgeS7 != 'OK'" @click="()=>clickCellViDetail(getRecord(record,'S7'))">{{record.siteJudgeS7}}</a>
                <span v-if="record.siteJudgeS7 == 'OK'" >{{record.siteJudgeS7}}</span>
              </template>
              <template slot="siteJudgeS8" slot-scope="text, record">
                <a v-if="record.siteJudgeS8 != 'OK'" @click="()=>clickCellViDetail(getRecord(record,'S8'))">{{record.siteJudgeS8}}</a>
                <span v-if="record.siteJudgeS8 == 'OK'" >{{record.siteJudgeS8}}</span>
              </template>
              <template slot="siteJudgeS9" slot-scope="text, record">
                <a v-if="record.siteJudgeS9 != 'OK'" @click="()=>clickCellViDetail(getRecord(record,'S9'))">{{record.siteJudgeS9}}</a>
                <span v-if="record.siteJudgeS9 == 'OK'" >{{record.siteJudgeS9}}</span>
              </template>
              <template slot="title">
                <a-row  style="margin: -8px -16px">
                  <div align="center"  class="m-table-title-footer-layout-left">{{queryLotInfoForm.lotId}}</div>
                  <div align="center" class="m-table-title-footer-layout-right" >Wafer Visual Inspection Record</div>
                </a-row>
              </template>
              <template slot="footer">
                <a-row  style="margin: -16px">
                  <div align="center"  class="m-table-title-footer-layout-left">Comment</div>
                  <div align="left"  class="m-table-title-footer-layout-right" >{{capForm.comment}}</div>
                </a-row>
              </template>
            </a-table>
          </a-col>
        </a-row>
        <!-- table Engineer -->
        <a-row>
          <a-col :span="24">
            <a-table
                :columns="columns"
                :dataSource="dataSourceVI2"
                :loading="loadTable"
                size="small"
                bordered
                :rowKey="(record,index)=>{return index}"
                :scroll="{y:120 }"
                :pagination="false"
            >
              <template  slot="siteJudgeS1" slot-scope="text, record">
                <a v-if="record.siteJudgeS1 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S1'))">{{record.siteJudgeS1}}</a>
                <span v-if="record.siteJudgeS1 == 'OK'" >{{record.siteJudgeS1}}</span>
              </template>
              <template  slot="siteJudgeS2" slot-scope="text, record">
                <a v-if="record.siteJudgeS2 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S2'))">{{record.siteJudgeS2}}</a>
                <span v-if="record.siteJudgeS2 == 'OK'" >{{record.siteJudgeS2}}</span>
              </template>
              <template slot="siteJudgeS3" slot-scope="text, record">
                <a v-if="record.siteJudgeS3 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S3'))">{{record.siteJudgeS3}}</a>
                <span v-if="record.siteJudgeS3 == 'OK'" >{{record.siteJudgeS3}}</span>
              </template>
              <template slot="siteJudgeS4" slot-scope="text, record">
                <a v-if="record.siteJudgeS4 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S4'))">{{record.siteJudgeS4}}</a>
                <span v-if="record.siteJudgeS4 == 'OK'" >{{record.siteJudgeS4}}</span>
              </template>
              <template slot="siteJudgeS5" slot-scope="text, record">
                <a v-if="record.siteJudgeS5 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S5'))">{{record.siteJudgeS5}}</a>
                <span v-if="record.siteJudgeS5 == 'OK'" >{{record.siteJudgeS5}}</span>
              </template>
              <template slot="siteJudgeS6" slot-scope="text, record">
                <a v-if="record.siteJudgeS6 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S6'))">{{record.siteJudgeS6}}</a>
                <span v-if="record.siteJudgeS6 == 'OK'" >{{record.siteJudgeS6}}</span>
              </template>
              <template slot="siteJudgeS7" slot-scope="text, record">
                <a v-if="record.siteJudgeS7 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S7'))">{{record.siteJudgeS7}}</a>
                <span v-if="record.siteJudgeS7 == 'OK'" >{{record.siteJudgeS7}}</span>
              </template>
              <template slot="siteJudgeS8" slot-scope="text, record">
                <a v-if="record.siteJudgeS8 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S8'))">{{record.siteJudgeS8}}</a>
                <span v-if="record.siteJudgeS8 == 'OK'" >{{record.siteJudgeS8}}</span>
              </template>
              <template slot="siteJudgeS9" slot-scope="text, record">
                <a v-if="record.siteJudgeS9 != 'OK'" @click="()=>clickCellEng(getRecord(record,'S9'))">{{record.siteJudgeS9}}</a>
                <span v-if="record.siteJudgeS9 == 'OK'" >{{record.siteJudgeS9}}</span>
              </template>
              <template slot="title" >
                <a-row style="margin: -8px -16px">
                  <div align="center"  class="m-table-title-footer-layout-left">{{queryLotInfoForm.lotId}}</div>
                  <div align="center"  class="m-table-title-footer-layout-right">Wafer Visual Inspection Record</div>
                </a-row>
              </template>
              <template slot="footer">
                <a-row style="margin: -16px">
                  <div align="center"  class="m-table-title-footer-layout-left">Comment</div>
                  <div align="left"  class="m-table-title-footer-layout-right">{{capForm.comment}}</div>
                </a-row>
              </template>
            </a-table>
          </a-col>
        </a-row>
<!--      </a-card>-->
    </a-modal>
    <VisualInspectionReportModel></VisualInspectionReportModel>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import VisualInspectionReportModel from "@/views/SEM1000/VisualInspectionReportModel";
export default {
  name: "VisualInspectionReport",
  components: {VisualInspectionReportModel},
  data() {
    return{
      columns: [
        {
          title: this.$t('menuItem.waferNo'),
          dataIndex: "waferNo",
          key: "waferNo",
          align: 'center',
          width: 120,
        },
        {
          title: this.$t('menuItem.WaferId'),
          dataIndex: 'waferId',
          key: 'waferId',
          align: 'center',
          width: 120,
        },
        {
          title: 'S1',
          dataIndex: 'siteJudgeS1',
          key: 'siteJudgeS1',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS1'},
        },
        {
          title: 'S2',
          dataIndex: 'siteJudgeS2',
          key: 'siteJudgeS2',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS2'},
        },
        {
          title: 'S3',
          dataIndex: 'siteJudgeS3',
          key: 'siteJudgeS3',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS3'},
        },
        {
          title: 'S4',
          dataIndex: 'siteJudgeS4',
          key: 'siteJudgeS4',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS4'},
        },
        {
          title: 'S5',
          dataIndex: 'siteJudgeS5',
          key: 'siteJudgeS5',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS5'},
        },
        {
          title: 'S6',
          dataIndex: 'siteJudgeS6',
          key: 'siteJudgeS6',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS6'},
        },
        {
          title: 'S7',
          dataIndex: 'siteJudgeS7',
          key: 'siteJudgeS7',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS7'},
        },
        {
          title: 'S8',
          dataIndex: 'siteJudgeS8',
          key: 'siteJudgeS8',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS8'},
        },
        {
          title: 'S9',
          dataIndex: 'siteJudgeS9',
          key: 'siteJudgeS9',
          align: 'center',
          scopedSlots: {customRender: 'siteJudgeS9'},
        },
      ],
      labelCol: {span: 7},
      wrapperCol: {span: 16},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  computed: {
    ...mapState('js1000', ['VisualInspectionReportDetailVisible','VisualInspectionReportVisible','queryForm','dataSourceVI','loadTable','dataSourceVI2',
      'capForm','queryLotInfoForm']),
  },
  methods: {
    ...mapMutations('js1000', ['VisualInspectionReportOk','VisualInspectionReportCancel','querySelectList','queryLotComment'
      ,'queryTableList','clickCellViDetail','queryEngTableList','clickCellEng','cleanData']),

    getRecord(rec,site) {
      let record=rec;
      record.site = site;
      return record;
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
  },
}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}
</style>
<style>
  .m-table-title-footer-layout-left{
    display:inline-block;width:240px;border-right: 1px solid  #e9e9e9;padding-top: 8px;padding-bottom: 8px
  }
  .m-table-title-footer-layout-right{
    width:calc(100% - 240px);display:inline-block;padding-top: 8px;padding-bottom: 8px;padding-left: 16px;
  }
</style>
